<template>
	<view class="container">
		<!-- 用户信息卡片 -->
		<view class="user-info">
			<image class="hbg" src="@/static/circle.png" mode="aspectFit" />
			<view class="user-content">
				<view class="user-box">
					<u-avatar size="50"></u-avatar>
					<view class="user-text">
						<text class="user-name">{{userInfo.name}}</text>
						<text class="user-depart">
							{{userInfo.employee_id}}
						</text>
					</view>
				</view>
			</view>
		</view>

		<view class="user-tabs">
			<u-cell-group>
				<u-cell @click="handleMessage" title="我的消息" icon="more-circle" :isLink="loginState" arrow-direction="right"></u-cell>
				<u-cell @click="handleSetting" title="个人设置" icon="setting" :isLink="loginState"
					arrow-direction="right"></u-cell>
			</u-cell-group>
		</view>

		<login v-if="!loginState"></login>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import login from '@/components/login/login.vue';
	export default {
		components: {
			login
		},
		data() {
			return {

			}
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			handleSetting() {
				if (this.loginState) {
					this.goToSetting();
				}
			},
			handleMessage() {
				if (this.loginState) {
					this.goToMessage();
				}
			},
			goToSetting() {
				uni.navigateTo({
					url: '/subpages/setting/setting'
				})
			},
			goToMessage() {
				uni.navigateTo({
					url: '/subpages/message/message'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #ffffff;
	}

	// 用户信息
	.user-info {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: center;
		width: 750upx;
		height: 300upx;
		border: none;
		background: #007edc;
		margin-bottom: 140upx;

		.hbg {
			position: absolute;
			width: 200upx;
			height: 200upx;
			top: -10upx;
			left: 0;
		}

		.user-content {
			position: absolute;
			bottom: -80upx;
			width: 620upx;
			background-color: #ffffff;
			z-index: 5;
			border-radius: 20upx;
			font-size: 36upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.6);

			.user-box {
				display: flex;
				margin-top: 40upx;
				margin-bottom: 40upx;
				padding-left: 40upx;

				.user-text {
					display: flex;
					flex-direction: column;
					text-align: left;
					line-height: 25px;
					padding-left: 50upx;

					.user-name {
						font-weight: bold;
						font-size: 48upx;
						color: #001432;
					}
				}
			}
		}
	}

	.user-tabs {
		background-color: #ffffff;
	}
</style>